import React from "react";

// 组件通讯基本使用
// 可传递的类型：string,array,number,bool,null,undefined,object,function,{<p></p>}

// <Child
//   name={"小明"}
//   age={18}
//   like={["看电影", "炸鸡", "可乐"]}
//   obj={{ sex: "男", height: 180 }}
//   fn={() => <h3>我发财了</h3>}
//   jsx={<h3>我买房啦</h3>}
// />

class Parent extends React.Component {
  render() {
    return (
      <div>
        <h1>我是父组件</h1>
        <hr />
        {/* 子组件 */}
      </div>
    );
  }
}

// 类组件
class Child extends React.Component {
  // 这是我们推荐的方式
  constructor(props) {
    super(props);
    console.log("构造函数中", props);
  }

  render() {
    console.log(this.props);
    return (
      <div>
        <h1>下面是父组件，即组件外传入的数据</h1>
        <h3>我叫{}</h3>
        <h3>我今年{}岁</h3>
        <h3>我喜欢{}</h3>
        <h3>
          我男盆友{},{}
        </h3>
        <h3>执行个函数吧，{}</h3>
        <h3>传递个JSX吧，{}</h3>
      </div>
    );
  }
}

export default Parent;
